/* =================================================================
   日历组件暗黑模式适配样式
   适用于排班日历、个人日历等相关组件的暗黑模式支持
   ================================================================= */

/* ==================== 全局暗黑模式变量 ==================== */
[data-theme='dark'],
.dark {
  /* 日历专用暗黑模式变量 */
  --calendar-bg-primary: #1f1f1f;
  --calendar-bg-secondary: #303030;
  --calendar-bg-tertiary: #404040;
  --calendar-bg-hover: #3c3c3c;
  --calendar-border-color: #424242;
  --calendar-text-primary: #e5eaf3;
  --calendar-text-secondary: #9b9da1;
  --calendar-text-placeholder: #7a7a7a;

  /* 班次类型颜色 - 暗黑模式 */
  --shift-normal-bg: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  --shift-normal-border: #3b82f6;
  --shift-normal-text: #dbeafe;
  --shift-normal-text-light: #93c5fd;

  --shift-leave-bg: linear-gradient(135deg, #14532d 0%, #166534 100%);
  --shift-leave-border: #22c55e;
  --shift-leave-text: #dcfce7;
  --shift-leave-text-light: #86efac;

  --shift-rest-bg: linear-gradient(135deg, #92400e 0%, #b45309 100%);
  --shift-rest-border: #f59e0b;
  --shift-rest-text: #fef3c7;
  --shift-rest-text-light: #fcd34d;

  --shift-timeoff-bg: linear-gradient(135deg, #334155 0%, #475569 100%);
  --shift-timeoff-border: #64748b;
  --shift-timeoff-text: #f1f5f9;
  --shift-timeoff-text-light: #cbd5e1;

  --shift-other-bg: linear-gradient(135deg, #831843 0%, #be185d 100%);
  --shift-other-border: #ec4899;
  --shift-other-text: #fdf2f8;
  --shift-other-text-light: #f9a8d4;

  /* 班次边框颜色 - 适配新增变量 */
  --shift-day-border: #3b82f6;
  --shift-night-border: #22c55e;
  --shift-special-border: #ec4899;
  --shift-active-border: #409eff;
  --shift-conflict-border: #ef4444;
  --shift-primary-border: #6366f1;
  --calendar-border-dark: #2c2c2c;

  /* 兼容旧版变量 */
  --next-border-color: var(--calendar-border-color);
  --next-bg-main-color: var(--calendar-bg-primary);
  --next-color-primary: var(--calendar-bg-secondary);
  --next-color-hover: var(--calendar-bg-hover);
  --next-text-color-regular: var(--calendar-text-primary);

  /* Element Plus 表格边框变量覆盖 */
  --el-table-border-color: var(--calendar-border-color) !important;
  --el-table-bg-color: var(--calendar-bg-primary) !important;
  --el-table-header-bg-color: var(--calendar-bg-secondary) !important;
  --el-table-row-hover-bg-color: var(--calendar-bg-hover) !important;
  --el-table-text-color: var(--calendar-text-primary) !important;

  /* Element Plus 日历组件边框变量覆盖 */
  --el-calendar-border: var(--calendar-border-color) !important;
  --el-calendar-cell-border: var(--calendar-border-color) !important;

  /* 表格边框线强制颜色覆盖 */
  --el-border-color: var(--calendar-border-color) !important;
  --el-border-color-light: var(--calendar-border-color) !important;
  --el-border-color-lighter: var(--calendar-border-color) !important;
  --el-border-color-extra-light: var(--calendar-border-color) !important;
  --el-border-color-dark: var(--calendar-border-color) !important;
  --el-border-color-darker: var(--calendar-border-color) !important;

  /* Element Plus 选择器暗黑模式样式 */
  --el-select-input-focus-border-color: var(--calendar-border-color) !important;

  /* Element Plus 下拉选项暗黑模式样式 */
  .el-select-dropdown {
    background: var(--calendar-bg-primary) !important;
    border: 1px solid var(--calendar-border-color) !important;

    .el-select-dropdown__item {
      background: var(--calendar-bg-primary) !important;
      color: var(--calendar-text-primary) !important;

      &:hover {
        background: var(--calendar-bg-hover) !important;
        color: var(--calendar-text-primary) !important;
      }

      &.selected {
        background: var(--calendar-bg-secondary) !important;
        color: var(--calendar-text-primary) !important;
      }
    }
  }

  /* 人员选择器选项暗黑模式样式 */
  .person-selector {
    .el-select-dropdown__item {
      .person-option {
        .person-main {
          .person-name {
            color: var(--calendar-text-primary) !important;
          }

          .person-staff-no {
            color: var(--calendar-text-secondary) !important;
            background: var(--calendar-bg-secondary) !important;
          }
        }

        .person-extra {
          color: var(--calendar-text-secondary) !important;

          .person-dept,
          .person-position {
            background: var(--calendar-bg-secondary) !important;
            color: var(--calendar-text-secondary) !important;
          }
        }
      }
    }

    .el-select-dropdown__item:hover {
      .person-option {
        .person-main {
          .person-staff-no {
            background: var(--calendar-bg-tertiary, #404040) !important;
          }
        }

        .person-extra {

          .person-dept,
          .person-position {
            background: var(--calendar-bg-tertiary, #404040) !important;
          }
        }
      }
    }
  }
}

/* ==================== Element Plus 下拉选择器全局暗黑模式 ==================== */
[data-theme='dark'] .el-select-dropdown,
.dark .el-select-dropdown {
  background: var(--calendar-bg-primary, #1f1f1f) !important;
  border: 1px solid var(--calendar-border-color, #424242) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-theme='dark'] .el-select-dropdown .el-select-dropdown__item,
.dark .el-select-dropdown .el-select-dropdown__item {
  background: var(--calendar-bg-primary, #1f1f1f) !important;
  color: var(--calendar-text-primary, #e5eaf3) !important;
}

[data-theme='dark'] .el-select-dropdown .el-select-dropdown__item:hover,
.dark .el-select-dropdown .el-select-dropdown__item:hover {
  background: var(--calendar-bg-hover, #3c3c3c) !important;
  color: var(--calendar-text-primary, #e5eaf3) !important;
}

[data-theme='dark'] .el-select-dropdown .el-select-dropdown__item.selected,
.dark .el-select-dropdown .el-select-dropdown__item.selected {
  background: var(--calendar-bg-secondary, #303030) !important;
  color: var(--calendar-text-primary, #e5eaf3) !important;
}

/* ==================== 人员选择器专用暗黑模式样式 ==================== */
[data-theme='dark'] .person-selector .el-select-dropdown__item,
.dark .person-selector .el-select-dropdown__item {
  .person-option {
    .person-main {
      .person-name {
        color: var(--calendar-text-primary, #e5eaf3) !important;
      }

      .person-staff-no {
        color: var(--calendar-text-secondary, #9b9da1) !important;
        background: var(--calendar-bg-secondary, #303030) !important;
      }
    }

    .person-extra {
      color: var(--calendar-text-secondary, #9b9da1) !important;

      .person-dept,
      .person-position {
        background: var(--calendar-bg-secondary, #303030) !important;
        color: var(--calendar-text-secondary, #9b9da1) !important;
      }
    }
  }
}

[data-theme='dark'] .person-selector .el-select-dropdown__item:hover,
.dark .person-selector .el-select-dropdown__item:hover {
  .person-option {
    .person-main {
      .person-staff-no {
        background: var(--calendar-bg-tertiary, #404040) !important;
        color: var(--calendar-text-secondary, #9b9da1) !important;
      }
    }

    .person-extra {

      .person-dept,
      .person-position {
        background: var(--calendar-bg-tertiary, #404040) !important;
        color: var(--calendar-text-secondary, #9b9da1) !important;
      }
    }
  }
}

/* ==================== Element Plus 组件暗黑模式适配 ==================== */
[data-theme='dark'],
.dark {

  /* 排班日历表格特殊样式 */
  .schedule-calendar {
    .el-table {
      border: 1px solid var(--calendar-border-color) !important;
      background: var(--calendar-bg-primary) !important;

      .el-table__header-wrapper {
        background: var(--calendar-bg-secondary) !important;
      }

      .el-table__header th {
        background: var(--calendar-bg-secondary) !important;
        border-right: 1px solid var(--calendar-border-color) !important;
        border-bottom: 1px solid var(--calendar-border-color) !important;
        color: var(--calendar-text-primary) !important;
      }

      .el-table__body-wrapper {
        background: var(--calendar-bg-primary) !important;
      }

      .el-table__body td {
        background: var(--calendar-bg-primary) !important;
        border-right: 1px solid var(--calendar-border-color) !important;
        border-bottom: 1px solid var(--calendar-border-color) !important;
        color: var(--calendar-text-primary) !important;
      }

      .el-table__row {
        background: var(--calendar-bg-primary) !important;

        &:hover {
          background: var(--calendar-bg-hover) !important;
        }
      }

      /* 员工列边框 */
      .employee-column .cell {
        border-right: 1px solid var(--calendar-border-color) !important;
      }

      /* 表格边框补丁 */
      .el-table__border-left-patch,
      .el-table__border-bottom-patch {
        background: var(--calendar-border-color) !important;
      }

      /* 修复所有可能的边框样式 */
      .el-table--border {
        border: 1px solid var(--calendar-border-color) !important;

        &::after {
          background: var(--calendar-border-color) !important;
        }
      }

      /* 确保表格内部边框线正确显示 */
      tr {
        border-bottom: 1px solid var(--calendar-border-color) !important;

        td,
        th {
          border-right: 1px solid var(--calendar-border-color) !important;
        }
      }
    }
  }

  /* 下拉选择框暗黑模式 */
  .el-select-dropdown {
    background: var(--calendar-bg-secondary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

    .el-select-dropdown__item {
      color: var(--calendar-text-primary) !important;

      &:hover {
        background: var(--calendar-bg-hover) !important;
      }

      &.is-selected {
        background: rgba(64, 158, 255, 0.15) !important;
        color: #409eff !important;
      }
    }
  }

  /* 日期选择器暗黑模式 */
  .el-picker-panel {
    background: var(--calendar-bg-secondary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

    .el-picker-panel__header {
      color: var(--calendar-text-primary) !important;
      border-bottom: 1px solid var(--calendar-border-color) !important;
    }

    .el-picker-panel__content {
      background: var(--calendar-bg-secondary) !important;
    }

    .el-date-table td {
      color: var(--calendar-text-primary) !important;

      &:hover {
        background: var(--calendar-bg-hover) !important;
      }

      &.today {
        color: #409eff !important;
        background: rgba(64, 158, 255, 0.1) !important;
      }

      &.current {
        background: #409eff !important;
        color: white !important;
      }
    }
  }

  /* 对话框暗黑模式 */
  .el-dialog {
    background: var(--calendar-bg-primary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important;

    .el-dialog__header {
      background: var(--calendar-bg-secondary) !important;
      border-bottom: 1px solid var(--calendar-border-color) !important;

      .el-dialog__title {
        color: var(--calendar-text-primary) !important;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: var(--calendar-text-secondary) !important;

          &:hover {
            color: var(--calendar-text-primary) !important;
          }
        }
      }
    }

    .el-dialog__body {
      background: var(--calendar-bg-primary) !important;
      color: var(--calendar-text-primary) !important;
    }

    .el-dialog__footer {
      background: var(--calendar-bg-primary) !important;
      border-top: 1px solid var(--calendar-border-color) !important;
    }
  }

  /* 消息提示暗黑模式 */
  .el-message {
    background: var(--calendar-bg-secondary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    color: var(--calendar-text-primary) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

    &.el-message--success {
      background: rgba(34, 197, 94, 0.15) !important;
      border-color: #22c55e !important;
      color: #86efac !important;

      .el-message__icon {
        color: #22c55e !important;
      }
    }

    &.el-message--warning {
      background: rgba(245, 158, 11, 0.15) !important;
      border-color: #f59e0b !important;
      color: #fcd34d !important;

      .el-message__icon {
        color: #f59e0b !important;
      }
    }

    &.el-message--error {
      background: rgba(239, 68, 68, 0.15) !important;
      border-color: #ef4444 !important;
      color: #fca5a5 !important;

      .el-message__icon {
        color: #ef4444 !important;
      }
    }

    &.el-message--info {
      background: rgba(99, 102, 241, 0.15) !important;
      border-color: #6366f1 !important;
      color: #a5b4fc !important;

      .el-message__icon {
        color: #6366f1 !important;
      }
    }
  }

  /* 通知暗黑模式 */
  .el-notification {
    background: var(--calendar-bg-secondary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

    .el-notification__title {
      color: var(--calendar-text-primary) !important;
    }

    .el-notification__content {
      color: var(--calendar-text-secondary) !important;
    }

    .el-notification__closeBtn {
      color: var(--calendar-text-secondary) !important;

      &:hover {
        color: var(--calendar-text-primary) !important;
      }
    }
  }

  /* 确认框暗黑模式 */
  .el-message-box {
    background: var(--calendar-bg-primary) !important;
    border: 1px solid var(--calendar-border-color) !important;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important;

    .el-message-box__header {
      .el-message-box__title {
        color: var(--calendar-text-primary) !important;
      }

      .el-message-box__headerbtn {
        .el-message-box__close {
          color: var(--calendar-text-secondary) !important;

          &:hover {
            color: var(--calendar-text-primary) !important;
          }
        }
      }
    }

    .el-message-box__content {
      color: var(--calendar-text-primary) !important;

      .el-message-box__message {
        color: var(--calendar-text-primary) !important;
      }
    }

    .el-message-box__btns {
      .el-button {
        &.el-button--primary {
          background: linear-gradient(135deg, #409eff 0%, #337ecc 100%) !important;
          border-color: #409eff !important;
        }

        &.el-button--default {
          background: var(--calendar-bg-secondary) !important;
          border-color: var(--calendar-border-color) !important;
          color: var(--calendar-text-primary) !important;

          &:hover {
            background: var(--calendar-bg-hover) !important;
          }
        }
      }
    }
  }

  /* 表格暗黑模式 - 全局样式 */
  .el-table {
    background: var(--calendar-bg-primary) !important;
    color: var(--calendar-text-primary) !important;
    border: 1px solid var(--calendar-border-color) !important;

    .el-table__header-wrapper {
      background: var(--calendar-bg-secondary) !important;

      .el-table__header {
        background: var(--calendar-bg-secondary) !important;

        th {
          background: var(--calendar-bg-secondary) !important;
          color: var(--calendar-text-primary) !important;
          border-bottom: 1px solid var(--calendar-border-color) !important;
          border-right: 1px solid var(--calendar-border-color) !important;
        }
      }
    }

    .el-table__body-wrapper {
      background: var(--calendar-bg-primary) !important;

      .el-table__body {
        tr {
          background: var(--calendar-bg-primary) !important;

          &:hover {
            background: var(--calendar-bg-hover) !important;
          }

          td {
            background: var(--calendar-bg-primary) !important;
            border-bottom: 1px solid var(--calendar-border-color) !important;
            border-right: 1px solid var(--calendar-border-color) !important;
            color: var(--calendar-text-primary) !important;
          }
        }
      }
    }

    .el-table__border-left-patch,
    .el-table__border-bottom-patch {
      background: var(--calendar-border-color) !important;
    }

    /* 确保所有边框线都使用暗黑模式颜色 */
    .el-table--border {
      border: 1px solid var(--calendar-border-color) !important;

      &::after {
        background: var(--calendar-border-color) !important;
      }
    }

    /* 固定列边框 */
    .el-table__fixed,
    .el-table__fixed-right {
      border-right: 1px solid var(--calendar-border-color) !important;
      background: var(--calendar-bg-primary) !important;
    }

    /* 表格外边框 */
    &::before {
      background: var(--calendar-border-color) !important;
    }

    /* 额外的边框修复 */
    .el-table__cell {
      border-right: 1px solid var(--calendar-border-color) !important;
    }

    /* 确保内部边框正确显示 */
    tbody tr {
      border-bottom: 1px solid var(--calendar-border-color) !important;
    }

    thead tr {
      border-bottom: 1px solid var(--calendar-border-color) !important;
    }
  }

  /* 个人日历组件边框强制覆盖 */
  .personal-schedule-dialog {
    .personal-calendar {
      --el-calendar-border: var(--calendar-border-color) !important;
      --el-border-color: var(--calendar-border-color) !important;
      --el-border-color-light: var(--calendar-border-color) !important;
      --el-border-color-lighter: var(--calendar-border-color) !important;

      .el-calendar__body {
        .el-calendar-table {
          border: 1px solid var(--calendar-border-color) !important;

          thead th,
          tbody td,
          .el-calendar-day {
            border: 1px solid var(--calendar-border-color) !important;
            border-color: var(--calendar-border-color) !important;
          }
        }
      }
    }
  }

  /* 分页器暗黑模式 */
  .el-pagination {

    .el-pagination__total,
    .el-pagination__jump {
      color: var(--calendar-text-primary) !important;
    }

    .btn-prev,
    .btn-next {
      background: var(--calendar-bg-secondary) !important;
      color: var(--calendar-text-primary) !important;

      &:hover {
        background: var(--calendar-bg-hover) !important;
      }
    }

    .el-pager li {
      background: var(--calendar-bg-secondary) !important;
      color: var(--calendar-text-primary) !important;

      &:hover {
        background: var(--calendar-bg-hover) !important;
      }

      &.is-active {
        background: #409eff !important;
        color: white !important;
      }
    }
  }
}

/* ==================== 动画和过渡效果增强 ==================== */
[data-theme='dark'],
.dark {

  /* 暗黑模式下的动画优化 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }

  /* 暗黑模式下的滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--calendar-bg-secondary);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--calendar-text-placeholder);
    border-radius: 4px;
    transition: background 0.2s;

    &:hover {
      background: var(--calendar-text-secondary);
    }
  }

  ::-webkit-scrollbar-corner {
    background: var(--calendar-bg-secondary);
  }
}

/* ==================== 响应式暗黑模式调整 ==================== */
@media (max-width: 768px) {

  [data-theme='dark'],
  .dark {

    /* 移动端暗黑模式优化 */
    .el-dialog {
      margin: 10px !important;
      width: calc(100% - 20px) !important;
    }

    .el-message-box {
      width: calc(100% - 40px) !important;
      margin: 20px !important;
    }

    /* 移动端日历组件优化 */
    .schedule-calendar,
    .personal-schedule-calendar {
      .date-cell {
        min-height: 60px;

        .shift-info {
          .shift-item {
            font-size: 10px;
            padding: 2px 4px;
            margin: 1px 0;
          }
        }
      }
    }
  }
}
